<template>
  <div style="width: 100%">
    <!-- 引入顶部标题-->
    <TopHeader/>
    <!--    二级顶部-->
    <div class="recommend-cooperation-content">
      <div class="recommend-cooperation-content-decorate">
        <img src="@/assets/images/submit-material-basic.png" alt="">
        <span>应急周转申请</span>
      </div>
    </div>
    <!--主体-->
              <!--推荐合作机构左上角标题-->
    <div class="recommend-cooperation-mechanism-main">
      <h3 class="recommend-cooperation-mechanism-title">推荐合作机构</h3><!--表格标题-->
      <hr>
      <!--表单-->
              <!--推荐合作机构单选框 前面的提示信息-->
      <el-form class="recommend-cooperation-mechanism-form" ref="form" :model="form" :rules="rules" label-width="80">
        <el-form-item  class="recommend-cooperation-top-title" label="推荐合作机构：" label-width="40" :required="true">
        </el-form-item>
                <!--单选框-->
        <el-form-item  prop="cooperativeInstitutions" >
          <el-radio-group v-model="form.cooperativeInstitutions"  >
            <el-radio v-for="(item,index) in form.type"
                      @click.native="clearOrderModel(item.id)"
                      :key=index
                      :label="item.id"
                      :value="item.id"
                      type="number"
            >{{item.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--银行模式-->
        <div v-if="form.cooperativeInstitutions === 22">
          <el-form-item label="银行模式：" prop="bankingModel">
                    <!--遍历银行数组信息  下拉框-->
            <el-select placeholder="银行模式" v-model="form.bankingModel">
              <el-option v-for="(item,index) in form.bankingModelData"
                         :key="index"
                         :label="item.name"
                         :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <!--如果类型ID=2  担保模式-->
        <div v-else-if="form.cooperativeInstitutions === 33" >
                <!--guaranteeModel 字符类型 担保信息输入框-->
          <el-form-item label="担保模式："  prop="guaranteeModel">
            <el-input v-model.trim="form.guaranteeModel"
                      placeholder="请输入担保信息"
                      style="width: 300px;border-radius: 20px;margin-left: 20px"/>
          </el-form-item>
        </div>

        <div v-else>
          <el-form-item label="其 他： "  prop="otherModel">
            <!--otherModel 字符类型 其他信息输入框-->
            <el-input v-model.trim="form.otherModel" placeholder="请输入" min="1" style="width: 300px;border-radius: 20px;margin-left: 43px"/>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" style="" @click="onSubmit('form')">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <!--  </div>-->
</template>

<script>
import TopHeader from "@/components/header/header";

export default {
  name: "recommendCooperationMechanism",
  data() {
    return {
      order:'',//订单
      form: {
        otherModel:'',//其他模式文字输入
        guaranteeModel:'',//担保模式文字输入
        cooperativeInstitutions:'',//推荐合作机构ID
        bankingModel:'',//银行ID 字符
        //以下是下拉框等选择数据
        type: [//推荐合作机构模式
          {id: 11, name: '其他'},
          {id: 22, name: '银行模式'},
          {id: 33, name: '担保模式'}
        ],
        bankingModelData: [//银行模式
          {id: 101, name: '桂林银行'},
          {id: 102, name: '中国工商银行'},
          {id: 103, name: '中国建设银行'},
          {id: 104, name: '中国银行'},
          {id: 105, name: '中国农业银行'}
        ],
      },
      rules: { // 表单校验
        cooperativeInstitutions: [
            {required:true, type: 'number',message: '请选择合作机构',trigger: 'blur'}
        ],
        bankingModel: [//空值校验
            {required:true, validator:this.bankingModelValid,  trigger: 'blur',message: '请选择银行'}
        ],
        guaranteeModel: [
            {required:true, validator:this.bankingModelValid,  message: '请输入担保信息',trigger: 'blur'}
        ],
        otherModel: [
          {required:true, validator:this.bankingModelValid,message: '请添加其他信息说明', trigger: 'blur'}
        ],
      },
    }
  },
  components: {
    TopHeader
  },
  methods: {
    clearOrderModel(id){//模式的点击时间， 点击模式的时候 清除其他两个模式的数据  参数为模式ID
       if (id === 11) {//其他模式 将银行模式、担保模式的输入信息清除
         this.form.bankingModel = ''
         this.form.guaranteeModel = ''
       }
       else if(id === 22){//银行模式 将其他模式、担保模式的输入信息清除
         this.form.guaranteeModel = ''
         this.form.otherModel = ''
       }
       else if (id === 33 ) { //担保模式 将银行模式和其他模式信息清除
         this.form.bankingModel = ''
         this.form.otherModel = ''
       }
    },
    bankingModelValid(rule, value, callback) {
      if (value === '') {
        //重置rules的phone、email的属性值，只校验手机，不校验邮箱
        callback(new Error('请输入信息'));
      }else {
        callback();  //重点在这 如果在验证通过后不添加callback()函数在验证时是条件会为false
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('成功');
          // console.log(this.form.cooperativeInstitutions)
          // console.log(this.form.bankingModel)
          // console.log(this.form.otherModel)
          // console.log(this.form.guaranteeModel)
          // // console.log(this.form.bankingModel)
          // console.log('成功')
          this.$router.push('/home/application-basic-Information')
        } else {
          // console.log(this.$refs.ruleForm.model)
          return false;
        }
      });

      // this.$router.push({
      //   name:'ApplicationBasicInformation',
      //   query:{
      //     order:this.order
      //   }
      // })
    },
    // async addRecommender(){
    //   let user = await this.$store.dispatch('getUser');
    //   // cooperativeInstitutions: '',//推挤合作机构 int 类型 长度2
    //   let cooperativeInstitutions = this.form.type.id;
    //   let otherModel = ''
    //   let guaranteeModel = ''
    //   let bankingModel = this.form.bankingModel.id
    //   console.log( this.form.bankingModel.id)
    //   // if (this.form.type === '银行模式'){
    //   //   cooperativeInstitutions = 1
    //   //   otherModel = ''
    //   //   guaranteeModel = ''
    //   //   bankingModel = this.from.bankingId
    //   // }
    //
    //   let res = await this.request.recommendCooperationMechanism.addRecommender({
    //     operateId:user.id,
    //     otherModel,
    //     cooperativeInstitutions,
    //     guaranteeModel,
    //     bankingModel
    //   })
    //   if(res.code === 200){
    //     this.order = res.data
    //   }
    // }
  },
  mounted() {
    this.watermark.set("张万志")
  }
}
</script>

<style src="./recommend-cooperation-mechanism.css" scoped>

</style>
